iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

30天打造品牌特色電商網站系列 第 12

30天打造品牌特色電商網站 Day.12 一定要有的導覽列

  • 分享至 

  • xImage
  •  

導覽列(Navigation)是每個網站必要且重要的元件,當使用者進到網頁想馬上找尋想要的資訊,好的導覽列設計能最快速、最有效率的引導使用者,減少使用者找尋資訊的煩躁感。


導覽列的類型

這邊將導覽列分類成三種來討論:

  1. 都在上面型,在最上方將連結列成一排
    這應該是蠻常見的方式,將主要的連結選項放在上面一目瞭然,而點進商品列表中,可考慮在側邊設計更細的分類選項,還有將列表的篩選功能放置在這邊,這邊建議超過5項連結導致畫面太擠就可以考慮下一種模式喔!
    適合商品數量較少、較專一的電商。

  2. 放在旁邊型,在側邊展開或是側邊某區塊,直行排列各式連結
    這樣的方式因為能垂直排列,較能夠展示更多的頁面連結,再分成兩種:

    • 導覽列可能放幾個功能,旁邊放個側邊展開的漢堡選單
      用在想讓畫面更多留白更有空間感的設計,或是連結數量在上排已經放不下的情況,而各類型手機版也應換成這樣的模式。這邊也能設計各連結點擊有下一層的分類,讓導覽列有細項分類但又能省空間。
      手機版當然適用,電腦上則適合較多連結頁面的網站,或是特別想著重畫面中央區塊的設計。

    • 一進網頁就在側邊
      這樣的方式能馬上看到有哪些商品群,因容納大量分類、大量產品,也或許點擊時能展開該選項更深的分類,這樣的形式適合什麼都賣的電商網站。
      適合商品數量較多、較多元的電商。

  3. 一鍵觸發型,按下選單按鈕,將跳出整個畫面的導覽選項
    這是一個比較特別且算少見的模式,但因為選單展開成全畫面,優點在於彈性設計容納少至多的選項排列。若放較少的物件可以呈現大塊留白展現質感;而多物件的排列上,可以有較詳細的說明,或是直接將常用功能放進來(例如購物車畫面)。
    適合...想用這種設計的人!

導覽列常見的物件

放在導覽列通常是重要的商品總覽、資訊、功能等等

  1. 商標Logo
    常以Logo作為連結,點擊可以回到首頁。
  2. 商品分類
    依需求列出幾項連結,比如:最新商品、商品列表、熱銷...等等頁面
  3. 資訊項目
    依相關功能性提供顧客重要資訊,可能關於品牌、關於店家。
    比如:販賣衣服提供尺寸比例圖、運送QA。
  4. 購物車
    通常是快速瀏覽當前購物車的內容物、總金額等資訊,另外附上前往結賬的按鈕。
  5. 搜尋
    讓使用者能搜尋商品。
  6. 會員專區
    點擊至登入頁面,登入完成後,登入按鈕可設計換成會員相關資訊,或是改為“登出”按鈕。

補充:頁尾footer

相對於導覽列,頁尾可以說是網頁地下下方的導覽列,因為這個區域較不易被看到,最主要的功能是使用者瀏覽到網站到底時,有各式連結可以快速轉換頁面,所以這部分可以因店家而異,放上各種細項連結,這邊建議幾項常見的物件:

  1. 訂閱電子報的email輸入框
    如果有電子報的服務,直接在這邊輸入email就能訂閱,對使用者來說很方便。
  2. 品牌有關社群連結
    放上像是facebook粉絲專頁、Instagram帳號、Line官方帳號等等。
  3. 品牌訊息
    有關品牌的說明理念,跟品牌聯絡的方式、甚至有分店查詢、加盟合作等。
  4. 幫助中心
    可能有關線上交易的條款、貨物退換須知、隱私條款...等客人可能會需要幫助。
  5. 網站設計版權
    通常放在最後一行,寫法如下:
    Copyright © [年份] [版權所有人或公司]. All rights reserved.
    或是改成中文
    版權所有 © [年份] [版權所有人或公司]

以上就是今天的分享,關於導覽列的框架及程式會再簡單向大家說明,感謝觀看!


上一篇
30天打造品牌特色電商網站 Day.11 CSS框架-Bootstrap5
下一篇
30天打造品牌特色電商網站 Day.13 導覽列基礎製作(上)
系列文
30天打造品牌特色電商網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言